:root {
  --tab-border-radius: 0.5rem;
}

.vp-tabs {
  margin: 1.5rem 0;
  border: 1px solid var(--vp-c-border);
  border-radius: var(--tab-border-radius);
}

.vp-tabs-nav {
  overflow-x: auto;

  margin: 0;
  padding: 0;
  border-radius: var(--tab-border-radius) var(--tab-border-radius) 0 0;

  background: var(--tab-c-bg-nav);
  list-style: none;

  white-space: nowrap;

  transition: background var(--vp-t-color);

  @media print {
    display: none;
  }
}

.vp-tab-nav {
  position: relative;

  min-width: 4rem;
  margin: 0;
  padding: 0.5em 1em;
  border: none;
  border-radius: var(--tab-border-radius) var(--tab-border-radius) 0 0;

  background: transparent;
  color: var(--tab-c-nav);

  font-weight: 600;
  font-size: 0.875em;
  line-height: 1.75;

  cursor: pointer;

  transition:
    background var(--vp-t-color),
    color var(--vp-t-color);

  &:hover {
    background: var(--tab-c-bg-nav-hover);
  }

  &::before,
  &::after {
    content: ' ';

    position: absolute;
    bottom: 0;
    z-index: 1;

    width: 8px;
    height: 8px;
  }

  &::before {
    right: 100%;
  }

  &::after {
    left: 100%;
  }

  &.active {
    background: var(--tab-c-bg);

    &::before {
      background: radial-gradient(
        16px at left top,
        transparent 50%,
        var(--tab-c-bg) 50%
      );
    }

    &::after {
      background: radial-gradient(
        16px at right top,
        transparent 50%,
        var(--tab-c-bg) 50%
      );
    }
  }

  &:first-child {
    &::before {
      display: none;
    }
  }
}

.vp-tab {
  display: none;

  padding: 1rem 0.75rem;
  border-radius: 0 0 var(--tab-border-radius) var(--tab-border-radius);

  background: var(--tab-c-bg);

  transition: background var(--vp-t-color);

  @media print {
    display: block;
    padding: 0.5rem;
  }

  &.active {
    display: block;
  }

  &:nth-child(n + 2) .vp-tab-title {
    border-top: none;
  }
}

.vp-tab-title {
  display: none;
  padding: 0.25rem 0;
  border-top: 1px solid var(--vp-c-border);
  font-weight: 500;

  @media print {
    display: block;
  }
}
